<script setup>
import { ref, onMounted } from "vue";
import NavBar from "@/components/NavBar/index.vue";

const chargeValue = ref('');
const chargeText = ref('请输入充值金额');

function navigateToHome() {
	uni.navigateBack();
};

function handleRecharge() {
	if (chargeValue) {
		// 这里执行充值逻辑
		console.log('充值金额:', chargeValue);
		// 例如：执行充值操作，可能需要调用后端API
	} else {
		chargeText = '请输入正确的充值金额'
		uni.showToast({
			title: '请输入正确的充值金额',
			icon: 'none'
		});
	}
};
</script>
  
<template>
  <div class="container">
    <NavBar></NavBar>
    <div @click="navigateToHome" class="back-nav">
      <image
        src="@/static/icon/chevron-left.png"
        style="width: 14px; height: 14px"
      ></image>
      <text>我的余额</text>
    </div>
		<div class="remain-container">
			<div class="remain-count">
				<text class="title">总余额</text>
				<text class="value">3000元</text>
			</div>
		</div>
		<div class="recharge-component">
			<text class="recharge-hint">{{chargeText}}</text>
			<input
				class="charge-input"
				type="number"
				
				v-model="chargeValue"
			/>
			<div class="button-container">
				<button class="recharge-button" @click="handleRecharge">前往充值</button>
			</div>
		</div>
		
  </div>
</template>

<style scoped>
.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 20px;
  background: linear-gradient(180deg, #c3e4b3 0%, #f5fff0 100%);
	box-sizing: border-box;
}

.back-nav {
  width: 100%;
  height: 20px;
  display: flex;
  justify-content: flex-start;
  margin: 20px 0;
  align-items: center;
  column-gap: 8px;
  font-size: 16px;
}
.remain-container {
	display: flex;
	width: 100%;
	margin-top: 10px;
	box-sizing: border-box;
}
.remain-count {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-grow: 1;
	
	height: 47px;
	padding: 0 15px;
	background-color: #f7fff3;
	border-radius: 10px;
}
.title {
	font-size: 12px;
}
.value {
	font-size: 16px;
	font-weight: 600;
}
.recharge-component {
	display: flex;
	flex-direction: column;
	
	margin-top: 30px;
	height: 157px;
	padding: 15px 15px 19px 17px;
	background-color: #f7fff3;
	border-radius: 10px;
	box-sizing: border-box;
}
.charge-input {
	width: 100%;
	height: 30px;
	padding-left: 8px;
	border: 1px solid #000;
	border-radius: 4px;
	outline: none;
	margin-top: 13px;
	margin-bottom: 31px;
	box-sizing: border-box;
}
.button-container {
	width: 100%;
	display: flex;
	justify-content: flex-end;
}
.recharge-button {
	width: 160px;
	height: 30px;
	
	margin-right: 6px;
	
	display: flex;
	justify-content: center;
	align-items: center;
		
	font-size: 16px;
	color: #fff;
	
	background: linear-gradient(90deg, #026217 0%, #04c82f 100%);
	border: none;
	outline: none;
	border-radius: 10px;
}
</style>
